<template>
	<div>
		<div class="head">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
					<el-breadcrumb-item>活动列表</el-breadcrumb-item>
					<el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="head_1">
				<div class="head_2">
					<div>订单号：WB2019110000001</div>
					<el-button type="primary" @click="paigong()">派工单</el-button>
				</div>
				<div class="head_3">
					<div>订单类型： 保养</div>
					<div>订单状态：已支付</div>
					<div>跨品牌：否</div>
					<div>车辆品牌：哈弗</div>
					<div>创建时间：2019-01-01 09：00</div>
					<div>预约时间：2019-01-01&nbsp; 11：00</div>
				</div>
			</div>
		</div>
		<div class="box1">
			<div class="box1_title">保养信息</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column fixed prop="name" label="服务类型" width="120"></el-table-column>
				<el-table-column fixed prop="name" label="服务类型" width="120"></el-table-column>
				<el-table-column fixed prop="name" label="型号" width="120"></el-table-column>
				<el-table-column fixed prop="name" label="备选零件编号" width="120"></el-table-column>
				<el-table-column label="商家结算明细">
					<el-table-column prop="name" label="商家报价" width="120"></el-table-column>
					<el-table-column prop="name" label="市场指导价" width="120"></el-table-column>
					<el-table-column label="保养订单结算价">
						<el-table-column prop="province" label="配件价格" width="120"></el-table-column>
						<el-table-column prop="city" label="工时费" width="120"></el-table-column>
						<el-table-column prop="address" label="小计" width="300"></el-table-column>
					</el-table-column>
					<el-table-column prop="name" label="市场促销优惠" width="120"></el-table-column>
					<el-table-column prop="name" label="优惠后结算价" width="120"></el-table-column>
				</el-table-column>
			</el-table>
			<div class="box1_title1">
				注：请核对服务内容与实际保养内容是否一致，并确认是否有使用优惠券或相关折扣。
			</div>
		</div>
		<div class="box2">
			<div>
				<div class="box2_title">4S点信息</div>
				<div class="box2_main">
					<div>4S店：中埔店</div>
					<div>顾问经理：彭于晏</div>
					<div>手机号码：138-0592-8888</div>
					<div>确认时间：2019-01-01 20:08</div>
				</div>
			</div>
			<div>
				<div class="box2_title">4S点信息</div>
				<div class="box2_main">
					<div>4S店：中埔店</div>
					<div>顾问经理：彭于晏</div>
					<div>手机号码：138-0592-8888</div>
					<div>确认时间：2019-01-01 20:08</div>
				</div>
			</div>
			<div>
				<div class="box2_title">4S点信息</div>
				<div class="box2_main">
					<div>4S店：中埔店</div>
					<div>顾问经理：彭于晏</div>
					<div>手机号码：138-0592-8888</div>
					<div>确认时间：2019-01-01 20:08</div>
				</div>
			</div>
		</div>
		<div class="foot">Copyright @2019 万车会 All Rights Reserved.</div>
		<!-- 弹窗 -->
		<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
		<el-dialog
		  title="订单派工单——万车会"
		  :visible.sync="dialogVisible"
		  width="80%"
		  :before-close="handleClose">
		  <span>
			  <div class="tc_box">
				  <img class="tc_img1" src="../assets/logo.png" alt="">
				  <div class="tc_title">订单派工单<span style="font-size: 20px;">（保养）</span></div>
				  <div class="xinxi">
					  <div>
						  <div>厦门万国汽车有限公司（中埔店）</div>
						  <div>福建省厦门市嘉禾路中埔社</div>
						  <div>0592-5740011</div>
						  <div>服务顾问：彭于晏</div>
						  <div>联系电话：13805928888 </div>
					  </div>
					  <div>
						  <div>订单编号：WG20190123456789</div>
						  <div>预定时间：2019-01-01 20:08</div>
						  <div>预约时间：2019-01-03 10:00</div>
						  <div>打印时间：2019-01-02 08:09</div>
						  <div>车主姓名：高小姐</div>
						  <div>车主姓名：高小姐</div>
					  </div>
				  </div>
				  <div class="clxx">
					  <div>车辆信息</div>
					  <div>车牌号</div>
					  <div>当前里程数(公里)</div>
				  </div>
				  <div class="clxx" style="color: rgba(16,16,16,0.6);">
					  <div>长城/哈弗/H9/2.0T自动7座超豪华型</div>
					  <div>闽D88888</div>
					  <div>82461</div>
				  </div>
				  <el-table
				        :data="tableData"
				        style="width: 100%">
				        <el-table-column
				          prop="date"
				          label="序号"
						  type="index"
				        >
				        </el-table-column>
				        <el-table-column
				          prop="name"
				          label="服务项目"
				        >
				        </el-table-column>
				        <el-table-column
				          prop="address"
				          label="型号说明">
				        </el-table-column>
						<el-table-column
						  prop="address"
						  label="备选零件编号">
						</el-table-column>
						<el-table-column
						  prop="address"
						  label="金额">
						</el-table-column>
				      </el-table>
						<div class="heji">合计：10000.00</div>
						<div class="time">日期：         年         月         日</div>
						<div class="foot_tc">
							本订单发票由万车会提供，请在验券后前往万车会APP订单详情中查看您的发票，发票金额为订单实际支付金额，如有
							任何问题，请咨询万车会客服：0592-5740011
						</div>
			  </div>
		  </span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				tableData: [
					{
						date: '2016-05-03',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-04',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-01',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-08',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-06',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}
				]
			};
		},
		methods:{
			paigong:function(){
				this.dialogVisible = true
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					done();
				 })
				.catch(_ => {});
			}
		}
	};
</script>

<style scoped>
	.foot_tc{
		text-align: center;
		margin-top: 90px;
	}
	.time{
		text-align: right;
	}
	.heji{
		color: rgba(16,16,16,0.6);
		text-align: right;
		margin: 18px 0 63px 0;
	}
	.clxx :nth-child(2),.clxx :nth-child(3){
		width: 20%;
	}
	.clxx :nth-child(1){
		width: 60%;
	}
	.clxx{
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		margin-bottom: 9px;
		font-family: SourceHanSansSC-bold;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.xinxi>div>div{
		margin-bottom: 13px;
		
	}
	.xinxi{
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
		color: rgba(16, 16, 16, 0.6);
		font-size: 14px;
		font-family: SourceHanSansSC-regular;
		margin-bottom: 90px;
	}
	.tc_box{
		padding: 0 150px;
		box-sizing: border-box;
	}
	.tc_title{
		color: rgba(16, 16, 16, 1);
		font-size: 26px;
		text-align: center;
		font-family: SourceHanSansSC-regular;
	}
	.tc_img1{
		width: 100px;
		height: 31px;
	}
	.foot{
		color: rgba(172, 172, 172, 1);
		font-size: 10px;
		text-align: center;
		font-family: Roboto;
		margin: 60px 0 77px 0;
	}
	.box2_main{
		padding: 0 20px;
		box-sizing: border-box;
		margin-top: 10px;
	}
	.box2_title{
		 height: 40px;
		 border-bottom: 1px solid #F5F5F5;
		 padding: 0 10px;
		 box-sizing: border-box;
		 line-height: 40px;
		 color: rgba(84, 84, 86, 1);
		 font-size: 10px;
		 font-family: Roboto;
	}
	.box2>div{
		width: 32%;
		height: 192px;
		border-radius: 8px;
		background-color: #FFFFFF;
		color: rgba(172, 172, 172, 1);
		font-size: 10px;
		font-family: Roboto;
		line-height: 35px;
		
	}
	.box2{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.box1_title1{
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		background-color: rgba(254, 251, 230, 1);
		border: 1px solid rgba(251, 230, 149, 1);
		padding: 0 19px;
		box-sizing: border-box;
		color: rgba(172, 172, 172, 1);
		font-size: 10px;
		font-family: Roboto;
		margin-top: 16px;
	}
	.box1_title {
		height: 44px;
		color: rgba(84, 84, 86, 1);
		font-size: 14px;
		font-family: Roboto;
		border-bottom: 2px solid #f5f5f5;
		line-height: 44px;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.box1 {
		padding: 22px;
		box-sizing: border-box;
		background: #ffffff;
		margin-top: 23px;
		margin-bottom: 16px;
	}
	.head_3 > div {
		width: 33.3%;
		margin-bottom: 7px;
		color: rgba(102, 102, 102, 0.73);
		font-size: 12px;
		font-family: Roboto;
	}
	.head_3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.head_2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(17, 1, 1, 1);
		font-size: 18px;
		font-family: Roboto;
	}
	.head_1 {
		padding: 0 32px;
		box-sizing: border-box;
	}
	.head {
		height: 163px;
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid rgba(255, 0, 0, 0);
	}
	.crumbs {
		height: 55px;
		background: #ffffff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 32px;
		box-sizing: border-box;
	}
</style>
